<script setup lang="ts">
import { RouterView ,useRoute} from 'vue-router';
import { computed } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { routes } from '../router';
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const route = useRoute()

//动态计算面包屑
const breadcrumbs = computed(()=>{
    //路由信息
    routes 

    //根据当前路由返回对应的面包屑数组
    if(route.path === '/user'){
        return [
            {path:'/',name:'首页'},
            {path:'/user',name:'用户管理'}
        ]
    }
    return [{path:'/',name:'首页'}]
})

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                    <el-menu-item index="/">
                        <el-icon><House /></el-icon><el-icon></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>基础设置</span>
                        </template>
                        <el-menu-item index="1-1"> 
                            <el-icon><Tickets /></el-icon>公司信息
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <el-icon><UserFilled /></el-icon>角色设置
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <el-icon><Postcard /></el-icon>权限设置
                        </el-menu-item>
                        <el-menu-item index="/user">
                            <el-icon><Stamp /></el-icon>用户管理
                        </el-menu-item>
                        <el-menu-item index="1-5">
                            <el-icon><Expand /></el-icon>商品类别设置
                        </el-menu-item>
                        <el-menu-item index="1-6">
                            <el-icon><ShoppingCart /></el-icon>商品管理
                        </el-menu-item>
                        <el-menu-item index="1-7">
                            <el-icon><Avatar /></el-icon>供应商信息
                        </el-menu-item>
                        <el-menu-item index="1-8">
                            <el-icon><Shop /></el-icon>仓库设置
                        </el-menu-item>
                        <el-menu-item index="1-9">
                            <el-icon><TrendCharts /></el-icon>货主信息
                        </el-menu-item>
                        <el-menu-item index="1-10">
                            <el-icon><Money /></el-icon>运费设置
                        </el-menu-item>
                        <el-menu-item index="1-11">
                            <el-icon><CreditCard /></el-icon>客户信息
                        </el-menu-item>
                        <el-menu-item index="1-12">
                            <el-icon><Printer /></el-icon>打印设置
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <el-breadcrumb separator="/" class="breadcrumb">
                        <!-- <el-breadcrumb-item :to="{ path: '/' }">基础设置</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
                        <el-breadcrumb-item v-for="(item,index) in breadcrumbs"
                        :key="index" 
                        :to="item.path">
                        {{item.name}}
                    </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  height: 50px;
}

.breadcrumb {
  font-size: 14px;
}

.breadcrumb-item :deep(.el-breadcrumb__inner) {
  color: #606266;
  font-weight: normal;
  transition: color 0.3s;
}

.breadcrumb-item :deep(.el-breadcrumb__inner):hover {
  color: #409eff;
  cursor: pointer;
}

.breadcrumb-item :deep(.el-breadcrumb__inner.is-link) {
  color: #303133;
  font-weight: 500;
}

.breadcrumb-item :deep(.el-breadcrumb__separator) {
  color: #c0c4cc;
}
</style>